<template>
	<div>
		<div id="Item">
			<el-card class="box">
				<!-- 搜索筛选名称或标题 -->
				<div class="flex">
					<div class="shop-name-label">店铺名称</div>
					<div class="time_top">创建时间</div>
				</div>
				<div class="block_center"></div>
				<div class="flexBox">
					<div>
						<el-input v-model.trim="inputed" @input="filters" placeholder="请输入店铺" class="search-input">
							<template #prefix>
								<el-icon class="el-input__icon">
									<search />
								</el-icon>
							</template>
						</el-input>
					</div>
					<div class="date-picker-container">
						<el-date-picker class="date-picker" @change="data_filters" v-model="time" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
					</div>
				</div>
				<div class="block_center"></div>
				<div class="block_center"></div>

				<div class="option">
					<div class="button-group">
						<!-- 快捷按钮筛选 -->
						<el-badge class="button-left">
							<el-button type="primary" size="default" class="export-button">
								导出
							</el-button>
						</el-badge>
						<el-badge class="button-left">
							<el-button size="default" class="status-button" :type="whole"
								@click="filts(0)">全部</el-button>
						</el-badge>
						<el-badge :value="status_e" class="button-left">
							<el-button size="default" class="status-button" :type="lefts"
								@click="filtstt(1)">待付款</el-button>
						</el-badge>
						<el-badge :value="status_z" class="button-left">
							<el-button size="default" class="status-button" :type="rights"
								@click="filtstt(2)">已付款</el-button>
						</el-badge>
						<el-badge :value="status_hx" class="button-left">
							<el-button size="default" class="status-button" :type="prima"
								@click="filtstt(3)">已核销</el-button>
						</el-badge>
						<el-badge :value="status_q" class="button-left">
							<el-button size="default" class="status-button" :type="closet"
								@click="filtstt(4)">已取消</el-button>
						</el-badge>
					</div>
					<div></div>
				</div>
				<!-- table表格数据展示 -->
				<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
					class="data-table" :cell-style="{ 'text-align': 'center' }" ref="multipleTableRef" height="auto"
					v-el-table-infinite-scroll="handleTableScroll" :header-cell-style="{ 'text-align': 'center' }"
					stripe @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" />
					<el-table-column prop="id" label="序号" width="70" fixed />
					<el-table-column prop="shop_title" width="140" label="店铺名称" show-overflow-tooltip fixed>
					</el-table-column>
					<el-table-column prop="nickname" min-width="120" label="用户名称" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="code" width="190" label="订单号" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="handle_money" width="120" sortable label="总价格">
					</el-table-column>
					<el-table-column prop="num" width="120" sortable label="总数量" />
					<el-table-column prop="status" label="状态">
						<template #default="scope">
							<p :class="{
								'status-pending': scope.row.status == 1,
								'status-paid': scope.row.status == 2,
								'status-used': scope.row.status == 3,
								'status-cancelled': scope.row.status == 4
							}">
								{{
									scope.row.status == 1 ? '待付款' :
										scope.row.status == 2 ? '待使用' :
											scope.row.status == 3 ? '已使用' :
												scope.row.status == 4 ? '已取消' :
													scope.row.status
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column prop="createtime" label="购买时间" width="180" fixed="right" show-overflow-tooltip>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<div class="paging">
					<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
						:page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled" background
						layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" />
				</div>
			</el-card>
		</div>
	</div>
</template>
<script setup>

import { ref, onMounted } from 'vue';
import { Search, Upload, RefreshRight, ArrowDown } from '@element-plus/icons-vue'
import { lack_order } from '../../../api/scien_order/index';
import { inject } from 'vue'
// 全局前缀
const testFn = inject('testFn')
testFn()
const testName = inject('testName')

// 登录存储起来的个人账户信息，为了拿token值
const tokens = JSON.parse(localStorage.getItem('tokens'));
console.log(tokens);
// 获取到当前时间
function getCurrentDateTimeString() {
	const now = new Date();
	// 获取当前的年份，并只取后两位
	const year = now.getFullYear().toString().slice();
	// 获取当前的月份，并确保是两位数（从0开始）
	const month = (now.getMonth() + 1).toString().padStart(2, '0');
	// 获取当前的日期，并确保是两位数
	const day = now.getDate().toString().padStart(2, '0');
	// 获取当前的小时，并确保是两位数
	const hours = now.getHours().toString().padStart('0');
	// 获取当前的分钟，并确保是两位数
	const minutes = now.getMinutes().toString().padStart(2, '0');
	// 获取当前的秒，并确保是两位数
	const seconds = now.getSeconds().toString().padStart(2, '0');
	// 拼接成所需的字符串格式
	const dateTimeString = `${year}-${month}-${day} ${hours}-${minutes}-${seconds}`;
	g = `${year}-${month}-${day}`
	return dateTimeString;
}

// 当前时间
let date = new Date();
// 获取当前时间
let date_time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
console.log(Date.parse(new Date(date_time)));
// 数据
const Data = ref([])

// 未支付角标
const status_e = ref('0')
// 已支付角标
const status_z = ref('0')
// 已取消
const status_q = ref('0')
// 已核销
const status_hx = ref('0')
// 表格数据
const tableData = ref([])
onMounted(() => {
	data()
})
// 请求数据渲染
const arr_sta = ref([])
const indexoff = ref([])
const data = () => {
	lack_order({
		token: tokens.token,
		uid: tokens.userinfo.id
	}, {
		userid: tokens.userinfo.id,
		uid: tokens.userinfo.id
	}).then(res => {
		console.log(res);
		if (res.code == 1) {
			arr_sta.value = res.data
			indexoff.value = res.data
			let arr = []
			let set = []
			let cancen = []
			let array_q = []
			for (let i = 0; i < res.data.length; i++) {
				// 未支付角标
				if (res.data[i].status == 1) {
					arr.push(res.data[i])
					status_e.value = arr.length
				}
				// 已支付角标
				if (res.data[i].status == 2) {
					set.push(res.data[i])
					status_z.value = set.length
				}
				// 已核销
				if (res.data[i].status == 3) {
					cancen.push(res.data[i])
					status_hx.value = cancen.length
				}
				// 已取消
				if (res.data[i].status == 4) {
					array_q.push(res.data[i])
					status_q.value = array_q.length
				}
				res.data[i].imgs = testName + res.data[i].userImg
				if (Date.parse(new Date(date_time)) < Date.parse(new Date(res.data[i].over_time))) {
					res.data[i].sheng = '生效中'
				} else {
					res.data[i].sheng = '未生效'
				}
				if (res.data[i].status == '1') {
					res.data[i].shen = '未支付'
				} else {
					res.data[i].shen = '已支付'
				}
			}
			Data.value = res.data;
			tableData.value = res.data;
			OrderAll.value = tableData.value.length
			searh()
		} else {
			OrderAll.value = 0
		}
	})

}
const inputed = ref('')
// 分类名称搜索
function filters() {
	console.log(inputed.value);
	let a = [];
	tableData.value = Data.value.filter(item => {
		// 判断是否满足搜索条件
		if (String(item.shop_title).indexOf(String(inputed.value)) > -1) {
			return tableData.value;
		}
	});
	currentPage.value = 1

	let arrs = []
	let sets = []
	let cancens = []
	let array = []
	// 赋值为了下面选项卡筛选准备上次结果
	search_data.value = tableData.value
	for (let k = 0; k < tableData.value.length; k++) {
		// console.log(tableData.value[k]);
		// 写三次判断
		// 未支付角标
		if (tableData.value[k].status == 1) {
			arrs.push(tableData.value[k])
			console.log(arrs);
			status_e.value = arrs.length
		} else if (tableData.value[k].status !== 1 || tableData.value[k].status !== 3) {
			status_e.value = arrs.length
		}
		if (tableData.value[k].status == 2) {
			sets.push(tableData.value[k])
			status_z.value = sets.length
		} else if (tableData.value[k].status !== 2) {
			status_z.value = sets.length

		}
		if (tableData.value[k].status == 3) {
			array.push(tableData.value[k])
			status_hx.value = array.length
		} else if (tableData.value[k].status !== 3) {
			status_hx.value = array.length

		}
		// 取消角标
		if (tableData.value[k].status == 4) {
			cancens.push(tableData.value[k])
			status_q.value = cancens.length
		} else if (tableData.value[k].status !== 4) {
			status_q.value = cancens.length
		}
		if (Date.parse(new Date(date_time)) < Date.parse(new Date(tableData.value[k].over_time))) {
			usable.value++
		} else {
			nousable.value++
		}
	}
	OrderAll.value = tableData.value.length
	tableData.value = tableData.value
	if (tableData.value == "") {
		status_z.value = '0'
		status_e.value = '0'
		status_q.value = '0'
		status_hx.value = '0'
	}
}
// 日期搜索
const data_filters = () => {
	let end_time
	let start_time
	let ars = []
	if (time.value) {
		end_time = Date.parse(new Date(time.value[0]))
		start_time = Date.parse(new Date(time.value[1]))
	}
	console.log(end_time);

	tableData.value = Data.value.filter((item) => {
		if (item.shop_title ?
			item.shop_title.indexOf(inputed.value) > -1 &&
			(time.value ?
				Date.parse(new Date(`${item.createtime}`)) > end_time &&
				Date.parse(new Date(` ${item.createtime}`)) < start_time : true
			) : true
		) {
			return item
		}
		ars.push(item)

		// console.log(item);
	});

	let arrs = []
	let sets = []
	let cancens = []
	let array = []
	// 赋值为了下面选项卡筛选准备上次结果
	search_data.value = tableData.value
	for (let k = 0; k < tableData.value.length; k++) {
		// console.log(tableData.value[k]);
		// 写三次判断
		// 未支付角标
		if (tableData.value[k].status == 1) {
			arrs.push(tableData.value[k])
			console.log(arrs);
			status_e.value = arrs.length
		} else if (tableData.value[k].status !== 1 || tableData.value[k].status !== 3) {
			status_e.value = arrs.length
		}
		if (tableData.value[k].status == 2) {
			sets.push(tableData.value[k])
			status_z.value = sets.length
		} else if (tableData.value[k].status !== 2) {
			status_z.value = sets.length

		}
		if (tableData.value[k].status == 3) {
			array.push(tableData.value[k])
			status_hx.value = array.length
		} else if (tableData.value[k].status !== 3) {
			status_hx.value = array.length

		}
		// 取消角标
		if (tableData.value[k].status == 4) {
			cancens.push(tableData.value[k])
			status_q.value = cancens.length
		} else if (tableData.value[k].status !== 4) {
			status_q.value = cancens.length
		}
		if (Date.parse(new Date(date_time)) < Date.parse(new Date(tableData.value[k].over_time))) {
			usable.value++
		} else {
			nousable.value++
		}
	}
	OrderAll.value = tableData.value.length
	tableData.value = tableData.value
	if (tableData.value == "") {
		status_z.value = '0'
		status_e.value = '0'
		status_q.value = '0'
		status_hx.value = '0'
	}
}
// 全选单选
const multipleTableRef = ref()
const SelectArr = ref([])
const handleSelectionChange = (val) => {
	SelectArr.value = val
	console.log(SelectArr.value);
}

// 页面条数
const pageSize = ref(5);
// 第几页
const currentPage = ref(1);
// 对用户名搜索
const search_name = ref('')
// 对手机号搜索
const search_tel = ref('')
// 对时间进行搜索
const time = ref('')
// 搜索后数据
const search_data = ref()
// 全部的徽章数量
const OrderAll = ref('0')
const usable = ref(0)
const nousable = ref(0)
const whole = ref('primary')
const lefts = ref('')
const rights = ref('')
const prima = ref('')
const closet = ref('')
// 搜索的事件
const searh = () => {
	currentPage.value = 1
	usable.value = 0
	nousable.value = 0
	let end_time
	let start_time
	let ars = []
	if (time.value) {
		end_time = Date.parse(new Date(time.value[0]))
		start_time = Date.parse(new Date(time.value[1]))
	}
	tableData.value = Data.value.filter((item) => {
		if (item.name ?
			item.name.indexOf(search_name.value) > -1 &&
			item.tel.indexOf(search_tel.value) > -1 &&
			(time.value ?
				Date.parse(new Date(`${item.create_year}-${item.create_month}-${item.create_date} ${item.create_time}`)) > end_time &&
				Date.parse(new Date(`${item.create_year}-${item.create_month}-${item.create_date} ${item.create_time}`)) < start_time : true
			) : true
		) {
			return item
		}
		ars.push(item)
		// console.log(item);
	});

	let arrs = []
	let sets = []
	let cancens = []
	let arrsr = []
	// 赋值为了下面选项卡筛选准备上次结果
	search_data.value = tableData.value
	for (let k = 0; k < tableData.value.length; k++) {
		// console.log(tableData.value[k]);
		// 写三次判断
		// 未支付角标
		if (tableData.value[k].status == 1) {
			arrs.push(tableData.value[k])
			console.log(arrs);
			status_e.value = arrs.length
		} else if (tableData.value[k].status !== 1 || tableData.value[k].status !== 3) {
			status_e.value = arrs.length
		}
		if (tableData.value[k].status == 2) {
			sets.push(tableData.value[k])
			status_z.value = sets.length
		} else if (tableData.value[k].status !== 2) {
			status_z.value = sets.length

		}
		// 取消角标
		if (tableData.value[k].status == 4) {
			cancens.push(tableData.value[k])
			status_q.value = cancens.length

		} else if (tableData.value[k].status !== 4) {
			status_q.value = cancens.length
		}
		if (tableData.value[k].status == 3) {
			arrsr.push(tableData.value[k])
			console.log(tableData.value[k]);

			status_hx.value = arrsr.length
		} else if (tableData.value[k].status !== 3) {
			status_hx.value = arrsr.length
		}
		if (Date.parse(new Date(date_time)) < Date.parse(new Date(tableData.value[k].over_time))) {
			usable.value++
		} else {
			nousable.value++
		}
	}
	OrderAll.value = tableData.value.length
	tableData.value = tableData.value
	if (tableData.value == "") {
		status_z.value = '0'
		status_e.value = '0'
		status_q.value = '0'
		status_hx.value = '0'
	}
}
// 快捷按钮搜索
const filtstt = (i) => {
	console.log(i);
	if (i == '1') {
		whole.value = ''
		lefts.value = 'primary'
		rights.value = ''
		prima.value = ''
		closet.value = ''
	}
	else if (i == '2') {
		whole.value = ''
		lefts.value = ''
		prima.value = ''
		rights.value = 'primary'
		closet.value = ''
	} else if (i == '3') {
		whole.value = ''
		lefts.value = ''
		prima.value = 'primary'
		closet.value = ''
		rights.value = ''
	} else if (i == '4') {
		whole.value = ''
		lefts.value = ''
		prima.value = ''
		closet.value = 'primary'
		rights.value = ''
	}
	// searh()
	let art = [];
	tableData.value = search_data.value.filter((item) => {
		// 判断是否满足搜索条件
		if (
			String(item.status).indexOf(String(i)) > -1
		) {
			return tableData
		}
	});

	console.log(tableData.value);

}
// 点击全部
const filts = () => {
	currentPage.value = 1
	tableData.value = search_data.value
	whole.value = 'primary'
	lefts.value = ''
	rights.value = ''
	closet.value = ''
	prima.value = ''
}

</script>

<style scoped>
#Item {
	padding: 10px;
}

.paging {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.input {
	width: 220px;
	height: 36px;
	margin-right: 10px;
}

.button {
	width: 60px;
	height: 35px;
}

.search {
	width: 65%;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.flexBox {
	display: flex;
	width: 100%;
	align-items: center;
}

.option {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.badge {
	margin-right: 10px;
}

.el-date-range-picker__content {
	box-sizing: border-box;
	float: left;
	margin: 0;
	padding: 16px;
	width: 38%;
}

/* 新增样式类 */
.shop-name-label {
	width: 220px;
}

.search-input {
	width: 220px;
}

.date-picker-container {
	margin-left: 20px;
}

.date-picker {
	width: 220px;
}

.button-group {
	margin-top: 0px;
}

.button-lefts {
	margin-right: 100px;
}

.export-button {
	height: 35px;
}

.status-button {
	height: 35px;
	margin-left: 20px;
}

.data-table {
	width: 100%;
}

.status-pending {
	color: rgba(255, 165, 0, 1);
}

.status-paid {
	color: rgba(64, 158, 255, 1);
}

.status-used {
	color: rgba(124, 252, 0, 1);
}

.status-cancelled {
	color: rgba(128, 128, 128, 1);
}
</style>